---
import { ArticleInformation } from "@/types/article";
import ArticleCard from "./ArticleCard.astro";

interface Props {
	articleList: ArticleInformation[];
}
const { articleList } = Astro.props;

let delay = 0;
const interval = 50;
---

<div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-4">
    {articleList.map((item: ArticleInformation) => (
        <ArticleCard
            title={item.title}
            tags={[]}
            sort={item.sort_name}
            publishTime={new Date(item.publish_time)}
            updateTime={new Date(item.update_time)}
            url={'/article/' + item.id + "/"}
            image={item.cover}
            description={item.content ? item.content.substring(0, 100) + "......" : "......"}
            pinned={false}
            class:list="onload-animation"
            style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}
        ></ArticleCard>
    ))}
</div>

